<template>  
    <view class="container">  
		<view class="user-section">
			<image class="bg" src="/static/temp/user-bg.png"></image>
			<view class="user-info-box">
				<view class="portrait-box">
					<image class="portrait" :src="userInfo.user_info.avatar || 'https://www.cqjbgyq.cn/uploads/missing-face.png'" v-if="userInfo"></image>
					<image class="portrait" src="https://www.cqjbgyq.cn/uploads/missing-face.png" v-else></image>
					<!-- <button class="portrait" open-type="chooseAvatar">
							<image style="width: 123rpx;height: 123rpx;margin-left: -28rpx;"  :src="userInfo.user_info.avatar || 'https://shanerxiang.com/uploads/adm_images/missing-face.png'" v-if="userInfo"></image>
							<image style="width: 123rpx;height: 123rpx;margin-left: -28rpx;"  src="https://shanerxiang.com/uploads/adm_images/missing-face.png" v-else></image>
					</button> -->
				</view>
				<view class="info-box">
					<view style="display: flex;" v-if="userInfo.user_info && userInfo.user_info.mobile">
						<view style="display: flex;flex-direction: column;" >
							<view style="display: flex;align-items: center;">
								<text class="username" style="font-size: 34rpx;">{{userInfo.user_info.nickname}}</text>
								<text class="cell-icon yticon icon-shezhi" @click="navTo('/pages/userinfo/userinfo')" style="font-size: 28rpx;margin-left: 10rpx;"></text>
							</view>
							
							<text class="username" style="font-size: 24rpx;font-weight: 600;margin-top: 10rpx;margin-left: 26rpx;">{{hideMiddlePhone(userInfo.user_info.mobile)}}</text>
						</view>
						<view class="role-info" v-if="showRole!=''">当前身份：{{showRole}}</view>
					</view>
					
					<view class="username" v-else @click="toLogin()">点我登录</view>
				</view>
			</view>
			
		</view>
		<view class="coin">
			<view class="coin-tit">
				<text class="font-w-600">我的积分</text>
				<text class="coin-n" @click="navTo('/pages/user/scorelist')">{{score}}</text>
			</view>
			<view>
				<view class="coin-b font-w-600" @click="tabbarTo('/pages/course/index')">积分获取</view>
			</view>
		</view>
		
		<!-- <view class="history-section icon">
			<list-cell  title="积分兑换" border="diy-class" @eventClick="navTo('/pages/set/set')"></list-cell>
			<view class="h-list">
				<view class="goods-detail" v-for="(item,index) in coinGoods" :key="index">
					<image :src="item.discover" mode="aspectFill"></image>
					<text class="goods-name">{{item.name}}</text>
					<view class="goods-coin">
						<text style="font-size: 30rpx;font-weight: 600">1234</text>
						<text style="margin-left: 10rpx;">积分</text>
					</view>
					
				</view>
				
			</view>			
		</view> -->
		
		<view class="cover-container">
			<!-- 菜单 -->
			<!-- <view class="order-section">
				<view class="order-item" v-for="(item,index) in myMenu2" :key="index" @click="menuClick(item)">
					<text class="yticon icon-diy" :class="item.class_name"></text>					
					<text>{{item.text}}</text>
					<text class="ms-num" v-if="item.num>0">{{item.num}}</text>
				</view>
				
			</view> -->
			
			<view class="order-section">
				<view class="order-item" v-for="(item,index) in showMenu" :key="index" @click="menuClick(item)">
					<image :src="item.icon" style="width: 60rpx;height: 60rpx;"></image>
					<text>{{item.text}}</text>
					<text class="ms-num" v-if="item.num>0">{{item.num}}</text>
				</view>
				
			</view>
			
		</view>
		
		<!-- <view class="logout-btn" v-if="hasLogin" @click="toLogout()">退出登录</view> -->
		<view class="logout-btn" v-if="hasLogin" @click="toRoleSelect()">切换身份</view>
		
    </view>  
</template>  
<script>  
	import listCell from '@/components/mix-list-cell';
    import { mapState,mapMutations } from 'vuex';  
	import Api from '@/common/api';
    export default {
		components: {
			listCell
		},
		data(){
			return {
				score:0,
				showMenu:[],
				myMenu:[
					{icon:'/static/temp/my-shop.png',text:'我的店铺',url:'/pages/shop/myshop',is_tabbar:0,num:0,need:1,role_show:[3]},
					{icon:'/static/temp/my-teacher.png',text:'我的授课',url:'/pages/order/orderCourseListTeacher',is_tabbar:0,num:0,need:1,role_show:[1]},
					{icon:'/static/temp/my-course.png',text:'我的课程',url:'/pages/order/orderCourseList',is_tabbar:0,num:0,need:1,role_show:[1,2,3]},
					{icon:'/static/temp/my-benifit.png',text:'我的公益',url:'/pages/benefit/index',is_tabbar:0,need:1,role_show:[1,2,3]},
					{icon:'/static/temp/my-exchange.png',text:'兑换订单',url:'/pages/order/orderExchangeList',is_tabbar:0,need:1,role_show:[1,2,3]},
					{icon:'/static/temp/my-message.png',text:'消息通知',url:'/pages/user/message',is_tabbar:0,num:0,need:1,role_show:[1,2,3]},
					// {icon:'/static/temp/my-about-us.png',text:'关于我们',url:'',is_tabbar:1,need:0,role_show:[1,2,3]}
				],
				myMenu2:[
					{class_name:'my-shop',text:'我的店铺',url:'/pages/shop/myshop',is_tabbar:0,num:0,need:1},
					{class_name:'my-course',text:'我的课程',url:'/pages/order/orderCourseList',is_tabbar:0,num:0,need:1},
					{class_name:'my-benifit',text:'我的公益',url:'/pages/benefit/index',is_tabbar:0,need:1},
					{class_name:'my-exchange',text:'兑换订单',url:'/pages/order/orderExchangeList',is_tabbar:0,need:1},
					{class_name:'my-message',text:'消息通知',url:'/pages/user/message',is_tabbar:0,num:0,need:1},
					// {class_name:'my-about-us',text:'关于我们',url:'',is_tabbar:1,need:0}
				],
				coinGoods:[
					{discover:'https://deeplor.oss-cn-hangzhou.aliyuncs.com/site/picup/cn-home/static/2.png',name:'垃圾袋处理10个'},
					{discover:'https://img2.baidu.com/it/u=2418263583,3129541683&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',name:'便宜垃圾袋处理102个'},
					{discover:'https://i0.hdslb.com/bfs/archive/609b9b5611900fad4b1f505687b7fe6b8a3442ad.jpg',name:'真的垃圾袋处理10个'}
				]
			}
		},
		onLoad(){
			
		},
		
        computed: {
			...mapState(['hasLogin','userInfo','user_role']),
			showRole:function(){
				if(this.$store.state.user_role==0){return '';}
				if(this.$store.state.user_role==1){return '老师';}
				if(this.$store.state.user_role==2){return '学生';}
				if(this.$store.state.user_role==3){return '爱心企业';}
			}
			
		},
		onShow(){
			this.setShowMenu();
			this.score=0;
			if(this.hasLogin){
				this.userCenter();
			}
		},
        methods: {
			...mapMutations(['logout']),
			toRoleSelect(){
				let role =this.$store.state.user_role;
				uni.navigateTo({
					url:`/pages/public/role?role=`+role
				})
			},
			hideMiddlePhone(number) {
			  if(!number) return;
			  const len = number.length;
			  // 确保手机号长度至少为6位
			  return (
			    number.substring(0, 3) + '****' + number.substring(len - 3, len)
			  );
			},
			tabbarTo(url){
				uni.switchTab({
					url:url
				})
			},
			navTo(url){
				uni.navigateTo({
					url:url
				})
			},
			menuClick(item){
				let url =item.url;
				if(url==''){
					this.$api.msg(`开发中，敬请期待`);
					return;
				}
				
				if(item.need==1){
					if(!this.hasLogin){
						uni.navigateTo({
							url:'/pages/public/wxLogin'
						});
						return;
					}
				}
				if(item.is_tabbar==1){
					uni.switchTab({
						url:url
					})
				}else{
					uni.navigateTo({
						url:url
					})
				}
			},
		    toLogin(){
				uni.navigateTo({
					url:'/pages/public/wxLogin'
				})
			},
			//退出登录
			toLogout(){
				let that = this;
				uni.showModal({
				    content: '确定要退出登录么',
				    success: async (e)=>{
				    	if(e.confirm){
							let data = await Api.apiCall('post',Api.apiName.user_logout);
							if(!data){
								return;
							}
				    		that.logout();
							that.score=0;
							that.showMenu=[];
							that.showMenu=that.myMenu;
				    		setTimeout(()=>{
				    			uni.navigateBack();
				    		}, 200)
				    	}
				    }
				});
			},
			async userCenter(){
				let data = await Api.apiCall('get',Api.apiName.user_main);
				if(!data){
					return;
				}
				this.score=data.data.score;
			},
			setShowMenu() {
				this.showMenu=[];
				if(!this.hasLogin){this.showMenu=this.myMenu;return}
				let _role=this.$store.state.user_role;
			    this.myMenu.map((item)=>{
					if(item.role_show.includes(_role)) {this.showMenu.push(item);}
				})
			},
			
        }  
    }  
</script>  
<style lang='scss'>
	page{
		background: #F5F5F5;
	}
	
	%flex-center {
	 display:flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	}
	%section {
	  display:flex;
	  justify-content: space-around;
	  align-content: center;
	  background: #fff;
	  border-radius: 10upx;
	}

	.user-section{
		height: 346upx;
		padding: 100upx 30upx 0;
		position:relative;
		.bg{
			position:absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			/* opacity: .7; */
		}
	}
	.user-info-box{
		
		display:flex;
		align-items:center;
		position:relative;
		z-index: 1;
		margin-top: 72rpx;
		.portrait{
			width: 130upx;
			height: 130upx;
			border:5upx solid #fff;
			border-radius: 50%;
		}
		.username{
			font-size: $font-lg + 6upx;
			color: $font-color-dark;
			margin-left: 20upx;
			font-weight: 600;
		}
	}

	
	.cover-container{
		background: #FFFFFF;
		
		margin: 30rpx;
		border-radius: 20rpx;
	}
	
	.order-section{
		display: flex;
		flex-wrap: wrap;
		padding: 28upx 0;
		margin-top: 20upx;
		.order-item{
			@extend %flex-center;
			width: 25%;
			height: 150upx;
			border-radius: 10upx;
			font-size: $font-sm;
			color: $font-color-dark;
			position: relative;
		}
		.my-shop {
			background-image:url('/static/temp/my-shop.png');
		}
		.my-course {
			background-image:url('/static/temp/my-course.png');
		}
		.my-benifit {
			background-image:url('/static/temp/my-benifit.png');
		}
		.my-exchange {
			background-image:url('/static/temp/my-exchange.png');
		}
		.my-message {
			background-image:url('/static/temp/my-message.png');
		}
		.my-about-us {
			background-image:url('/static/temp/my-about-us.png');
		}
		.icon-diy{
			margin-bottom: 18upx;
			height: 60rpx;
			background-size: cover;
			width: 60rpx !important;
		}
	}

	.diy-class{
		padding: 0rpx 30rpx 0rpx 50rpx !important;
	}
	.coin{
		border-radius: 20rpx 20rpx 0 0;
		background: #AEC9D6;
		display: flex;
		margin: 30rpx;
		align-items: center;
	}
	.coin-tit{
		flex: 1;
		padding: 30rpx 50rpx;
	}
	.coin-n{
		color: #0191FF;
		margin-left: 20rpx;
		font-weight: 600;
	}
	.font-w-600{
		font-weight: 600;
	}
	.coin-b{
		padding: 10rpx 30rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		margin: 20rpx;
		font-size: 24rpx;
		color: #0191FF;
	}
	.history-section{
		padding: 10upx 0 0;
		margin: -30rpx 30rpx 0rpx 30rpx;
		background: #fff;
		border-radius:0rpx 0rpx 10rpx 10rpx;
		.h-list{
			padding: 0upx 30upx 0;
			display: flex;
			image{
				display:inline-block;
				width: 200upx;
				height: 200upx;
				margin-right: 20upx;
				border-radius: 10upx;
			}
			.goods-name{
				font-size: 24rpx;
				margin-top: 20rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 90%;
			}
			.goods-coin{
				font-size: 24rpx;
				margin:20rpx 0rpx;
				color:#6CB15E;
			}
		}
	}
	.logout-btn{
		text-align: center;
		margin: 30rpx;
		background: #FFFFFF;
		padding: 20rpx 0rpx;
		border-radius: 20rpx;
	}
	.ms-num{
		position: absolute;
		background: #FF0000;
		width: 26rpx;
		height: 26rpx;
		border-radius: 50%;
		top: 10rpx;
		right: 48rpx;
		font-size: 16rpx;
		color:#FFFFFF;
		text-align: center;
		line-height: 26rpx;
	}
	.role-info{
		margin-left: 20rpx;
		border: 1px solid #0191FF;
		height: 43rpx;
		font-size: 22rpx;
		padding: 0rpx 14rpx;
		border-radius: 14rpx;
		color: #0191FF;
		margin-top: 10rpx;
		line-height: 43rpx;
		/* width: 252rpx; */
	}
	.goods-detail{
		display: flex;
		flex-direction: column;
		width: 30%;
		margin: 14rpx auto;
	}
	button::after{
		border: none !important;
	}
	
</style>